<template>
	<div id="box">
		<select name="sel1" id="sel1">
			<option value="year"></option>
		</select>年
		<img class="slt01" src="../../assets/img/sanjiao.png"/>
		<select name="sel2" id="sel2">
			<option value="month"></option>
		</select>月
		<img class="slt02" src="../../assets/img/sanjiao.png"/>
		<select name="sel3" id="sel3">
			<option value="day"></option>
		</select>日
		<img class="slt03" src="../../assets/img/sanjiao.png"/>
	</div>
</template>
<script>
	export default {
		components: {

		},
		methods: {
			//生成日期
			creatDate: function() {
				//生成1900年-2100年
				for(var i = 2017; i >= 1920; i--) {
					//创建select项
					var option = document.createElement('option');
					option.setAttribute('value', i);
					option.innerHTML = i;
					sel1.appendChild(option);
				}
				//生成1月-12月
				for(var i = 1; i <= 12; i++) {
					var option1 = document.createElement('option');
					option1.setAttribute('value', i);
					option1.innerHTML = i;
					sel2.appendChild(option1);
				}
				//生成1日—31日
				for(var i = 1; i <= 31; i++) {
					var option2 = document.createElement('option');
					option2.setAttribute('value', i);
					option2.innerHTML = i;
					sel3.appendChild(option2);
				}
			}

		},
		mounted: function() {
			this.creatDate();
		},

	}
</script>

<style scoped>
	#box{
		width: 460px;
		position: relative;
		font-size: 16px;
	}
	#box img{
		position: absolute;
	}
	.slt01{
		left: 90px;
		top: 13px;
	}
	.slt02{
		left: 220px;
		top: 13px;
	}
	.slt03{
		left: 350px;
		top: 13px;
	}
	select {
		width: 110px;
		height: 35px;
		border: solid 1px #d3d3d3;
		font-size: 16px;
		color: #333;
		text-indent: 5px;
	}
	
	select {
		/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
		border: solid 1px gainsboro;
		/*很关键：将默认的select选择框样式清除*/
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		/*将背景改为红色*/
		background:#FFFFFF;
		/*加padding防止文字覆盖*/
		/*padding-right: 14px;*/
	}
	/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
	
	select::-ms-expand {
		display: none;
	}
	option {
		width: 100px;
	}
</style>